<template>
    <div>
        <h1>计算器</h1>
        <input type="text" placeholder="请输入第一个数" v-model="num1">
        <input type="text" placeholder="请输入第二个数" v-model="num2">
        <button @click="add">加</button>
        <button @click="jian">减</button>
        <button @click="cheng">乘</button>
        <button @click="chu">除</button>
        <p v-if="re !== null">结果是:{{ re }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const num1 = ref(0)
const num2 = ref(0)
const re = ref(null)

const add = () => {
    re.value = parseFloat(num1.value) + parseFloat(num2.value)

}

const jian = () => {
    re.value = num1.value - num2.value
}

const cheng = () => {
    re.value = num1.value * num2.value
}


const chu = () => {
    re.value = num1.value / num2.value
}

</script>
